import {Tabs,message,Popconfirm,Divider,Tooltip } from 'antd'
import React, { useState, useRef, useEffect } from 'react'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table'
import { connect,Link } from 'umi'
import { queryList,updateRegular,updateCorrectionInfo} from '../service'
import { regularStatusEnum } from '@/utils/constant'
import moment from 'moment';
import CreateForm from './components/CreateForm'

const TableList = () => {
  const actionRef = useRef()
  const actionRef2 = useRef()
  const [tabIndex, setTabIndex] = useState("0")
  const  { TabPane } = Tabs;
  const [visible, setVisible] = useState(null)
  const [object,setObject] = useState({})
  let notColumns = [
    {
      title: '工号',
      dataIndex: 'code',
      hideInSearch: true,
    },
    {
      title: '姓名',
      dataIndex: 'name',
      render: (item, record) => (
        <Link to={`/info/details/${record.oid}`}>{item}</Link>
      ),
    },
    {
      title: '公司',
      dataIndex: 'orgname',
    },
    {
      title: '部门',
      dataIndex: 'unitname',
    },
    {
      title: '岗位',
      dataIndex: 'jobname',
    },
    {
      title: '职级',
      dataIndex: 'jobLevel',
      hideInSearch: true,
    },
    {
      title: '转正情况',
      dataIndex: 'isRegular',
      hideInSearch: true,
      valueEnum: regularStatusEnum,
    },
    {
      title: '入职日期',
      dataIndex: 'hiredate',
      render: (text) => {
        return text ? moment(text).format('YYYY-MM-DD') : ''
      },
      hideInSearch: true,
    },
    {
      title: (tabIndex === '0') ? '预计转正日期' : '转正日期',
      dataIndex: 'regularDay',
      render: (text) => {
        return text ? moment(text).format('YYYY-MM-DD') : ''
      },
      hideInSearch: true,
    },
  ];

  const updateCorrectionDate = (record,value) =>{
    setVisible(true);
    setObject({oid:record.oid,regularDay:record.regularDay,isRegular:value,regularRemark:record.regularRemark})
  };

  const updateState = (params,value,dealStatus) =>{
    updateRegular(params,value,dealStatus).then((res) => {
      if(res.flag){
        message.success('状态修改成功！');
        actionRef.current.reload()
      }else{
        message.error(res.error)
      }
    });
  };

  const handleCancel = () => {
    setVisible(false)
  };

  const handleSubmit = (values) => {
    setVisible(false)
    updateCorrectionInfo(values).then(res=>{
      if(res.flag) {
        message.success('更新转正信息成功！');
        actionRef.current.reload()
      } else {
        message.error(res.error)
      }
    })
  };

  const callback = (key) => {
    setTabIndex(key)
    if(key === '0'){
      actionRef.current &&  actionRef.current.reload();
    }else{
      actionRef2.current && actionRef2.current.reload();
    }
  };

  if(tabIndex === '0') {
    notColumns.push( {
      title: '操作',
        dataIndex: 'option',
        valueType: 'option',
        render: (item, record) => (
        <>
          <a onClick={() => updateCorrectionDate(record,2)}>更新转正日期</a>
          {/*<Divider type="vertical"/>*/}
          {/*<Popconfirm title="是否关闭转正？" cancelText='取消' okText='确认' onConfirm={() => updateState(record,3,5)}>*/}
          {/*  <a >关闭转正</a>*/}
          {/*</Popconfirm>*/}
        </>
      ),
    })
  } else {
    notColumns.push({
      title: '备注',
      dataIndex: 'regularRemark',
      hideInSearch: true,
      onCell: ()=>{
        return {
          style:{
            maxWidth:200,
            overflow:'hidden',
            whiteSpace:'nowrap',
            textOverflow:'ellipsis',
            cursor:'pointer',
          }
        }
      },
      render: (text) =>{
        return <Tooltip placement="topLeft" title={text}>{text}</Tooltip>
      }
    })
  }

  return (
    <PageHeaderWrapper>
      <Tabs animated={false} defaultActiveKey="0" onChange={callback}>
        <TabPane tab="未发起转正" key="0">
          <ProTable
            actionRef={actionRef}
            rowKey="oid"
            request={(params) => queryList(params,tabIndex,[0,2,4], [0,1])}
            columns={notColumns}
          />
          <CreateForm
            visible={visible}
            object={object}
            onCancel={handleCancel}
            onSubmit={handleSubmit}
          />
        </TabPane>
        <TabPane tab="已办结" key="1">
          <ProTable
            actionRef={actionRef2}
            rowKey="oid"
            request={(params) => queryList(params,tabIndex,[1,3],[1,2,3,4])}
            columns={notColumns}
          />
        </TabPane>
      </Tabs>
    </PageHeaderWrapper>
  )
}

export default connect(({  }) => ({
}))(TableList)
